import React, { useState } from 'react';
import { Card } from 'antd';
import { Button, Modal } from 'antd';
function App() {


   const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
const tabList = [
  {
    key: 'tab1',
    tab: '火车',
  },
  {
    key: 'tab2',
    tab: '中转',
  },
];

const contentList: Record<string, React.ReactNode> = {
  tab1: <p>火车</p>,
  tab2: <p>中转</p>,
};

const tabListNoTitle = [
  {
    key: 'article',
    label: 'article',
  },
  {
    key: 'app',
    label: 'app',
  },
  {
    key: 'project',
    label: 'project',
  },
];

const contentListNoTitle: Record<string, React.ReactNode> = {
  article: <p>article content</p>,
  app: <p>app content</p>,
  project: <p>project content</p>,
};

  const [activeTabKey1, setActiveTabKey1] = useState<string>('tab1');

  const onTab1Change = (key: string) => {
    setActiveTabKey1(key);
  };


  return (
    <>
      {/* [4,4,1,1,1,2,2,2,2,3]=>[1,2,3,4] */}
          [4,4,1,1,1,2,2,2,2,3] <br />
 
 <Button onClick={showModal}>
   点击去重并排序
      </Button>
      <Modal  open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>[1,2,3,4]</p>
      </Modal>


  <Card
        style={{ width: '50%' }}
        tabList={tabList}
        activeTabKey={activeTabKey1}
        onTabChange={onTab1Change}
      >
        {contentList[activeTabKey1]}
      </Card>
      <br />
      <br />
 






    </>
  );
}

export default App;
